<template>

	<!-- 自定义navbar组件【放在窗体外部，否则被content占据间距】 -->
	<CustomNavbar navTitle='商品规格' :isTitleStyle="true"></CustomNavbar>

	<view class="container">
		<Tree ref="qiantree" lazy :selectParent="selectParent" :multiple="multiple" :range="productSpecificationsList"
			:foldAll="flod" :modules="modules" :modulesName="modulesName" idKey="value" rangeKey="label" @initData="initData" </Tree>
	</view>

	<CustomAddBtn path="/pages/product/specifications/update?navTitle=新增商品规格"></CustomAddBtn>

</template>

<script>
	import CustomNavbar from "@/components/CustomNavbar.vue"
	import CustomAddBtn from "@/components/CustomAddBtn.vue"
	import Tree from '@/components/Tree.vue';
	import {
		productApi
	} from '@/utils/api.js'
	export default {
		components: {
			Tree,
			CustomNavbar,
			CustomAddBtn
		},
		data() {
			return {
				productSpecificationsList: [
					// {
					// 	label: '电子数码',
					// 	value: 1,
					// 	children: [
					// 		{
					// 			label: '手机',
					// 			value: 2,
					// 			children: [
					// 				{
					// 					label: '魅族',
					// 					value: 3,
					// 				}
					// 			]
					// 		},
					// 	]
					// },
				],
				multiple: true,
				selectParent: true,
				flod: true,
				modules: 'specifications',
				modulesName: '规格'
			}
		},
		onLoad() {
			this.initData()
		},
		methods: {
			initData() {
				productApi.getSpecificationsList().then(res => {
					if (res) {
						this.productSpecificationsList = res.data;
						this.showTree();
					}
				})
			},
			//显示树形结构
			showTree() {
				this.$refs.qiantree._show();
			},
		}
	}
</script>

<style>

</style>